<template>
  <div>
    <div :id="mapBaidu" style="width: 100%; height: 350px;margin: 0 auto;"></div>
  </div>
</template>

<script>
  export default {
    props: ["gpsInfo"],
    data(){
      return {
        nextRun: 0,
        map: "",
        myIcon: "",
        mapBaidu:"mapBaidu"+Date.parse(new Date())/1000,
        carMk: [],
        mapPoints: [],
        isRun: true,
        isnumRun: true,
        numOld:0
      }
    },
    components: {},
    created(){

    },
    mounted(){
//         this.getMap()

    },
    computed: {},
    methods: {
      getMsr(isRun){
        this.isRun = isRun
        this.nextRun = 0
        this.numOld=0
        this.carMk.length = 0
        if (!isRun) {
          this.carMk.forEach((item, key) => {
            if(this.carMk){
              this.carMk[key].hide()
            }
            this.map.removeOverlay(this.carMk[key]);

          })
          if(this.map){
            this.map.clearOverlays();
          }

        }
      },
      runIcon () {

        let _this = this
        _this.numOld++

        if (!_this.isRun) {
          _this.carMk=[]
          return
        }
        var mapPointsLength = _this.mapPoints.length
        var pts = _this.mapPoints[_this.nextRun];
        var len = pts.length;

        _this.carMk[_this.nextRun] = new BMap.Marker(pts[0], {icon: _this.myIcon});

        if( _this.carMk.length==_this.numOld){
          _this.map.addOverlay(_this.carMk[_this.nextRun]);
          resetMkPoint(1, len, pts, _this.carMk[_this.nextRun])
        }else {
          _this.carMk.forEach((item, key) => {
              _this.carMk[key].hide()
          })

          _this.numOld= _this.carMk.length
          return;
        }

        function resetMkPoint (i, len, pts, carMk) {
          carMk.setPosition(pts[i]);
          if (i < len) {
            setTimeout(function () {
              i++;
              resetMkPoint(i, len, pts, carMk);
            }, 20);
          } else {
            if (_this.nextRun < mapPointsLength - 1) {
                _this.nextRun += 1

//              if(_this.nextRun>0&&_this.nextRun<mapPointsLength){
//                _this.carMk[_this.nextRun-1].hide()
//              }

              if (_this.nextRun > 0) {
                _this.carMk.forEach((item, key) => {
                  if (key < _this.nextRun) {
                    _this.carMk[key].hide()
                  }
                })
              }else if(_this.carMk.length!=_this.numOld){

              }
            }

          }
        }
      },

      getMap(){

        let _this = this

        // 百度地图API功能
        _this.map = new BMap.Map(_this.mapBaidu, {enableMapClick:false});
        if(this.gpsInfo.length>0){
          _this.map.centerAndZoom(new BMap.Point(this.gpsInfo[0].lng, this.gpsInfo[0].lat), 15);
        }else {
          _this.map.centerAndZoom(new BMap.Point(114.0678347501, 22.5463964552), 15);
        }


        _this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        var bounds = null;
        var linesPoints = null;

        if (this.gpsInfo.length == 0) {
          return;
        }

        var arr = []
        this.gpsInfo.forEach((item) => {
          arr.push(new BMap.Point(item.lng, item.lat))

        })

        _this.myIcon = new BMap.Icon("./static/bicycle.png", new BMap.Size(32, 70), {imageOffset: new BMap.Size(0, 0)});

        function initLine () {
          bounds = new Array();
          linesPoints = new Array();
          _this.map.clearOverlays();                                                    // 清空覆盖物
          var driving3 = new BMap.WalkingRoute(_this.map, {onSearchComplete: drawLine});  // 驾车实例,并设置回调

          arr.forEach((item, key) => {
            if(key==0){
             let startIcon= new BMap.Marker(item, {icon: new BMap.Icon("./static/images/start.png",new BMap.Size(32, 70)),})
              _this.map.addOverlay(startIcon)
            }else if(key==arr.length-1){
              let startIcon= new BMap.Marker(item, {icon: new BMap.Icon("./static/images/end.png",new BMap.Size(32, 70)),})
              _this.map.addOverlay(startIcon)
            }
            if (key < arr.length - 1) {
              driving3.search(arr[key], arr[key + 1]);
            }
            //打点
            var vectorMarker = new BMap.Marker(item, {
              // 指定Marker的icon属性为Symbol
              icon: new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
                scale:2,//图标缩放大小
                fillColor: "orange",//填充颜色
                fillOpacity: 0.8,//填充透明度
                strokeColor:"orange"
              })
            });
            _this.map.addOverlay(vectorMarker);

          })

        }

        function drawLine (results) {
          var opacity = 0.45;
          var planObj = results.getPlan(0);
          var b = new Array();

          var addPoints = function (points) {
            for (var i = 0; i < points.length; i++) {
              bounds.push(points[i]);
              b.push(points[i]);
            }
          }
          // 绘制驾车步行线路
          for (var i = 0; i < planObj.getNumRoutes(); i++) {
            var route = planObj.getRoute(i);
            if (route.getDistance(false) <= 0) {continue;}
            addPoints(route.getPath());
            // 驾车线路
            if (route.getRouteType() == BMAP_ROUTE_TYPE_DRIVING) {
              _this.map.addOverlay(new BMap.Polyline(route.getPath(), {
                strokeColor: "green",
                strokeOpacity: opacity,
                strokeWeight: 4,
                enableMassClear: true
              }));
            } else {
              // 步行线路有可能为0
              _this.map.addOverlay(new BMap.Polyline(route.getPath(), {
                strokeColor: "#30a208",
                strokeOpacity: 0.75,
                strokeWeight: 4,
                enableMassClear: true
              }));
            }
          }
          if (linesPoints.length < 5) {
            _this.map.setViewport(bounds);
          }

          linesPoints[linesPoints.length] = b;
          _this.mapPoints = linesPoints

        }
        if(this.gpsInfo.length<2){
          initLine();
          return;
        }else {
          initLine();
        }

      /*  setTimeout(function () {

            _this.getMsr(true)

          _this.isRun=true
          _this.runIcon();

        }, 3000);*/

      },

    },
    watch: {
      nextRun(){
        let _this = this
        if (_this.nextRun > 0 && _this.isRun) {
          _this.runIcon()
        }
      },
      /*gpsInfo(){
        this.nextRun = 0
        if(this.isRun){
          this.getMap()
        }
      }*/

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #allmap {
    width: 100%;
    height: 350px;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
    margin: 0 auto;
  }
</style>
